<template>
	<view>
		<uni-nav-bar left-icon="left" statusBar :border='false' color="#000" fixed :backgroundColor='backgroundColor'>

		</uni-nav-bar>
		<view class="topView">
			<view class="title">
				请选择您的身份
			</view>
			<view class="title1">
				便于我们为您提供最佳服务
			</view>
			<view class="line">

			</view>
			<view  v-for="(item,index) in list" :key="index">
				<view @click="itemClick(index)" class="item flex-row-space-between" :class="[item.isSelected?'item1':'']">
					<view class="name flex-row-flex-start" :class="[item.isSelected?'name2':'']">
						<uni-icons  v-if="!item.isSelected" type="circle" size="20" color="#00000050"></uni-icons>
						<uni-icons  v-if="item.isSelected" type="checkbox" size="20" color="#3F81FF"></uni-icons>
						
						<text style="margin-left: 10rpx;">	{{item.name}}</text>
					
					</view>
					<image class="icon" :src="item.icon" mode=""></image>
				</view>
			</view>
			<view @click="setRole()" class="button flex-column-center">
				保存
			</view>
		</view>




	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		
		setRole
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				sindex:0,
				keyword: '',
				list: [
					{
						name: '在册人员',
						icon: '../../static/index/image1.png',
						isSelected: 0,
						value:1
					},
					{
						name: '非在册人员',
						icon: '../../static/index/image.png',
						isSelected: 0,
							value:2
					},
				],
				title: "",
				backgroundColor: 'ffffff00',
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#BBD8F6"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			
		},
		onLoad(e) {
			this.userinfo=uni.getStorageSync('userinfo')
			if(this.userinfo.group_id==1){
				this.list[0].isSelected=1
				this.sindex=0
			}
			if(this.userinfo.group_id==2){
				this.list[1].isSelected=1
				this.sindex=1
			}
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			itemClick(index){
				this.sindex=index
				this.list.forEach(item => {
					
					item.isSelected=0
				})
				this.list[index].isSelected=1
			},
			setRole(){
				var data = {
					group_id: this.list[this.sindex].value
				}
				setRole(data).then(res => {
					if (Number(res.code) == 1) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					
				
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}			
				
				})
			},
			


		}
	}
</script>

<style lang="scss">
	.title {
		margin: 60rpx;
		font-weight: bold;
		font-size: 48rpx;
		color: #333333;
	}

	.title1 {
		margin: 60rpx;
		margin-top: -40rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}

	.line {
		margin: 60rpx;
		margin-top: -24rpx;
		width: 64rpx;
		height: 6rpx;
		background: #157EFE;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.item{
		margin: 60rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1px solid #FFFFFF;
	}
	.item1{
		border: 1px solid #157EFE;
	}
	.name{
		margin-left: 40rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
	}
	.name2{
		color: #157EFE;
	}
	.icon{
		margin-right: 30rpx;
		width: 180rpx;
		height: 162rpx;
	}
	.button{
		margin: 60rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
</style>